<!--
 * @Author: wjk
 * @Date: 2019-12-31 15:40:51
 * @LastEditors: xlm
 * @LastEditTime: 2021-07-19 13:55:08
 * @description: file content
 -->
<template>
  <base-page-view class-name="page-container certification-page" v-if="showPage">
    <view class="certification-content">
      <view class="certification-title">基础信息</view>
      <view class="card-box new-card-box">
        <!-- <view class="card new-card" :class="real.auth_type!=='idCard'?'no-border':''">
          <span class="text">证件类型</span>
          <span class="content_input" @click="showAuthType()">{{real.auth_typeStr}}</span>
          <b-image :is-asset="true" @click="showAuthType()" src="/static/images/mine/arrow-below-black.png" width="26" height="14"></b-image>
        </view> -->
        <view v-if="real.auth_type!=='idCard'">
          <view class="upload-card">
            <view class="tit">请拍摄并上传你的身份照片</view>
            <view class="tip-box">
              <view>支持jpg、png或jpeg格式5M以内，证件照只有一面可上传1张</view>
            </view>
            <view class="box">
              <view class="item">
                <b-image :is-asset="!real.front"
                  :src="real.front ? real.front : '/static/images/mine/card-front-demo.png'" width="243" height="162"
                  @click="uploadImage('front')"></b-image>
                <view class="tip">拍摄正面</view>
              </view>
              <view class="item">
                <b-image :is-asset="!real.back" :src="real.back ? real.back : '/static/images/mine/card-back-demo.png'"
                  width="243" height="162" @click="uploadImage('back')"></b-image>
                <view class="tip">拍摄反面</view>
              </view>
            </view>
          </view>
        </view>
        <view class="card new-card" :class="{'b_border':real.auth_name?true:false}">
          <span class="text" :class="{'text-grey': updateRealname && codeValid}">真实姓名</span>
          <input v-model="real.auth_name" placeholder="请输入" :class="{'updateRealname':updateRealname && codeValid}"
            class="content_input" placeholder-class="placeholderClass"
            :disabled="updateRealname||pageType == 'cloudAlipay'" @input="inputFocus($event, 1)"
            @focus="inputFocus($event, 1)" @blur="inputBlur(1)" />
          <image v-if="delete1" src="/static/images/icon/icon_close.png" mode="aspectFit" class="delete"
            @click="real.auth_name = ''" />
        </view>
        <view class="card new-card">
          <span class="text" :class="{'text-grey': updateRealname && codeValid}">证件号码</span>
          <input v-model="real.auth_no" maxlength="18" placeholder="请输入"
            :class="{'updateRealname':updateRealname && codeValid}" class="content_input"
            placeholder-class="placeholderClass" :disabled="updateRealname||pageType == 'cloudAlipay'"
            @input="inputFocus($event, 2)" @focus="inputFocus($event, 2)" @blur="inputBlur(2)" />
          <image v-if="delete2" src="/static/images/icon/icon_close.png" class="delete" @click="real.auth_no=''" />
        </view>
        <view v-if="real.auth_type!=='idCard'">
          <view class="foreign-card card" :class="{'b_border':real.bank_name?true:false}">
            <span class="text">出生日期</span>
            <picker mode="date" style="flex:1" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
              <view class="uni-input">{{date}}</view>
            </picker>
            <b-image :is-asset="true" src="/static/images/mine/arrow-below-black.png" width="26" height="14"></b-image>
          </view>
          <view class="foreign-card card" :class="{'b_border':real.bank_name?true:false}">
            <span class="text">国<span style="opacity:0">占位</span>籍</span>
            <span class="content_input" style="flex:1;min-height: 28rpx;"
              @click="showAuthType('nationality')">{{real.countryName}}</span>
            <b-image :is-asset="true" @click="showAuthType('nationality')"
              src="/static/images/mine/arrow-below-black.png" width="26" height="14"></b-image>
          </view>
          <view class="foreign-card card" :class="{'b_border':real.bank_name?true:false}">
            <span class="text">性<span style="opacity:0">占位</span>别</span>
            <span class="content_input" style="flex:1;min-height: 28rpx;"
              @click="showAuthType('gender')">{{real.gender}}</span>
            <b-image :is-asset="true" @click="showAuthType('gender')" src="/static/images/mine/arrow-below-black.png"
              width="26" height="14"></b-image>
          </view>
        </view>
      </view>
      <view v-if="real.auth_type==='idCard'">
        <view class="certification-title">银行信息</view>
        <view class="card-box">
          <view class="card" :class="{'b_border':real.bank_no?true:false}"
            :style="useBottomGreyLine?'border-bottom: 1px solid #999;':'border-bottom: 1px solid #eaeaea;'">
            <span class="text ">银行卡号</span>
            <input v-model="bank_no" maxlength="22" placeholder="请输入" class="content_input"
              placeholder-class="placeholderClass" :disabled="updateRealname && !codeValid"
              @input="inputFocus($event, 3)" @focus="inputFocus($event, 3)" @blur="inputBlur(3)" />
            <image v-if="delete3" src="/static/images/icon/icon_close.png" class="delete" @click="bank_no=''" />
          </view>
          <view class="card" :class="{'b_border':real.bank_name?true:false}">
            <span class="text">所属银行</span>
            <input v-model="real.bank_name" placeholder="请选择" class="content_input" placeholder-class="placeholderClass"
              disabled="true" @click="chooseBank" />
            <image v-if="!(updateRealname && !codeValid)" src="/static/images/icon/icon_arror_right.png"
              mode="aspectFit" alt="" class="icon_my_more" />
          </view>
          <address-picker :show="showAddressPicker" key-str="name"
            :default-data="[addressData.province,addressData.city,addressData.area]" @close="showAddressPicker = false"
            @confirm="onConfirm" />
          <view class="card" :class="{'b_border':real.bank_area?true:false}" @tap="showAddress">
            <span class="text">开户所在地</span>
            <input v-model="real.bank_area" placeholder="请选择" class="content_input" placeholder-class="placeholderClass"
              disabled="true" />
            <image v-if="!(updateRealname && !codeValid)" src="/static/images/icon/icon_arror_right.png"
              mode="aspectFit" alt="" class="icon_my_more" />
          </view>
          <view class="card">
            <span class="text">预留手机</span>
            <input v-model="real.bank_mobile" type="number" :disabled="updateRealname && !codeValid" maxlength="11"
              placeholder="请输入" class="content_input" placeholder-class="placeholderClass"
              @input="inputFocus($event, 4)" @focus="inputFocus($event, 4)" @blur="inputBlur(4)" />
            <image v-if="delete4" src="/static/images/icon/icon_close.png" class="delete"
              @click="real.bank_mobile=''" />
          </view>
        </view>
      </view>
    </view>
    <view class="inland-status-tip" v-if="real.auth_type==='idCard' && real.status_msg">温馨提示：{{real.status_msg}}</view>
    <!-- <view v-if="!codeValid && updateRealname" class="saveReal" @click="saveReal">
      <view class="text">{{ saveText }}</view>
    </view> -->
    <view class="saveReal" :class="{'saveRealUn': canSub||real.status===2}" @click="saveReal">
      <!-- <view class="text" v-if="real.status===2">{{ saveText }}</view> -->
      <view class="text" v-if="real.status_cloud===3">{{ saveText }}</view>
      <b-open-type v-if="real.status_cloud===3" open-type="contact" />
      <view class="text" v-else>{{ saveText }}</view>
    </view>
    <view class="status-tip" v-if="real.auth_type!=='idCard' && real.status_msg">温馨提示：{{real.status_msg}}</view>
    <verifyPhone v-if="showPhoneDialog" :phone="user.mobile" @close="showPhoneDialog=false" @validMsg="validMsg"
      @sendMsg="sendMsg" />
    <my-picker :show="showPicker" v-if="showPicker" key-str="name" :default-data="list" ackBtnColor="#007FFF"
      @close="showPicker = false" @confirm="myOnConfirm" />
  </base-page-view>
</template>

<script>
  import './bindBank.scss'
  import {
    mapGetters
  } from 'vuex'
  import {
    regexp
  } from '@/utils/regexp'
  import verifyTime from '@/components/verifyTime/index.vue'
  import addressPicker from '../address/address-picker/index.vue'
  import {
    h5NavigateTo
  } from '@/utils/navigateTo'
  import myPicker from '../certification/components/myPicker.vue'
  import verifyPhone from '../certification/components/verifyPhone.vue'
  export default {
    components: {
      addressPicker,
      verifyTime,
      myPicker,
      verifyPhone
    },
    data() {
      const currentDate = this.getDate({
        format: true
      })
      return {
        result: '',
        showAddressPicker: false,
        showPhoneDialog: false,
        waittingMsg: false,
        codeValid: false, // 验证码
        addressData: [],
        bank_no: '',
        real: {
          auth_name: '',
          auth_no: '',
          auth_type: '', // 证件码
          auth_typeStr: '', // 证件名称
          bank_no: '',
          bank_name: '',
          bank_mobile: '',
          front: '', //证件证正面
          back: '', // 证件证反面
          birthday: '', // 出生日期
          country: '', // 国别码
          countryName: '', // 国别
          gender: '', // 性别
          certificates: []
        },
        dataName: {
          auth_name: '请输入真实姓名',
          auth_no: '请输入证件号码',
          bank_no: '请输入银行卡号',
          bank_name: '请选择所属银行',
          bank_area: '请选择开户所在地',
          bank_mobile: '请输入手机号',
          front: '请上传证件照',
          back: '请上传证件照',
          birthday: '请选择出生日期',
          country: '请选择国籍',
          gender: '请选择性别',
        },
        delete1: false,
        delete2: false,
        delete3: false,
        delete4: false,
        delete5: false,
        updateRealname: false,

        showPicker: false,
        date: currentDate, // 出生日期
        list: [{
            name: '身份证',
          },
          {
            name: '护照',
          },
          {
            name: '港澳居民来往内地通行证',
          },
          {
            name: '台湾居民来往内地通行证',
          },
          {
            name: '中华人民共和国港澳居民居住证',
          },
          {
            name: '中华人民共和国台湾居民居住证',
          },
          {
            name: '外国人永久居留身份证',
          },
          {
            name: '中华人民共和国外国人就业许可证书',
          },
        ],
        auth_types: [],
        useBottomGreyLine: false, // 使用颜色更深的下划线
        saveText: '', // 按钮文字
        realStatus: '',
        status: '',
        status_cloud: '',
        curSelectedType: '',
        countryList: [], // 国别码列表
        showPage: false,
        pageType: '', //页面类型
        bindBankCard: false
      }
    },
    computed: {
      // saveText() {
      //   let c = ''
      //   if (this.updateRealname && this.codeValid) {
      //     c = '确定'
      //   } else if (this.updateRealname) {
      //     c = '联系客服修改'
      //   } else {
      //     c = '确认提交'
      //   }
      //   return c
      // },
      startDate() {
        return this.getDate('start');
      },
      endDate() {
        return this.getDate('end');
      },
      canSub() {
        let canSub = ''
        if (!this.real.auth_name && this.real.auth_name !== 0) {
          canSub = 'auth_name'
        } else if (!this.real.auth_no && this.real.auth_no !== 0) {
          canSub = 'auth_no'
        }
        if (this.real.auth_type !== 'idCard') {
          // 国外用户校验出生日期, 国籍, 性别
          if (!this.real.front || !this.real.back) {
            canSub = 'front'
          }
          console.log("计算出生日期")
          if (!this.date) {
            canSub = 'birthday'
          }
          if (!this.real.countryName) {
            canSub = 'country'
          }
          if (!this.real.gender) {
            canSub = 'gender'
          }

        } else {
          if (!this.real.bank_mobile && this.real.bank_mobile !== 0) {
            canSub = 'bank_mobile'
          } else if (!this.real.bank_no && this.real.bank_no !== 0) {
            canSub = 'bank_no'
          } else if (!this.real.bank_name && this.real.bank_name !== 0) {
            canSub = 'bank_name'
          } else if (!this.real.bank_area && this.real.bank_area !== 0) {
            canSub = 'bank_area'
          }
        }
        return canSub
      },
      ...mapGetters(['user'])
    },
    watch: {
      bank_no() {
        console.log("watch数据:", 'bank_no')
        this.bank_no = this.maskValue(this.bank_no, '9999 9999 9999 9999999')
        this.real.bank_no = this.bank_no.replace(/\s*/g, '')
      }
    },
    onLoad(options) {
      this.pageType = options.pageType //上个页面类型 cloudAlipay指从云账户
      this.bindBankCard = options.bindBankCard //是否绑定过银行卡
      console.log("bind", options.bindBankCard)
      uni.showLoading()
      if (options.updateRealname) {
        this.updateRealname = options.updateRealname
      } else {
        this.updateRealname = false
      }
      setTimeout(() => {
        if (options.examine === 'true') {
          uni.showToast({
            title: '审核未通过, 请重新提交',
            icon: 'none',
            duration: 2 * 1000
          })
        }
      }, 1000)
    },
    async onShow() {
      await this.getCountryList()
      const realName = uni.getStorageSync('realName')
      if (realName) {
        this.real = JSON.parse(realName)
        console.log("real", this.real)
      } else {
        await this.certificationGet()
      }
      this.real.auth_type = ''
      if (this.real) {
        this.bank_no = this.real.bank_no
        // 云账号认证状态
        // Submit("Submit", 2, "提交审核"),
        // NONE("NONE", 0, "NONE"),
        // Scuess("Scuess", 3, "成功"),
        // Fail("Fail", 4, "审核失败");
        this.real.status_cloud = 2
        console.log(typeof this.bindBankCard)
        if (this.status_cloud === 3) {
          this.realStatus = '已实名'
          this.saveText = '联系客服修改'
        } else if (this.status_cloud === 2) {
          this.realStatus = '立即修改'
          this.saveText = '立即修改'
          // 当审核中时不支持修改提示：审核中不支持修改
        } else {
          this.realStatus = '未实名'
          this.saveText = '确认提交'
        }
        //绑定修改银行卡逻辑
        if (this.bindBankCard == "false") {
          this.saveText = "立即绑定"
        } else {
          uni.setNavigationBarTitle({
            title: '更换银行卡'
          })
          this.saveText = '立即更换'
        }
        this.list = this.real.auth_types
        this.auth_types = JSON.parse(JSON.stringify(this.real.auth_types))
        if (!this.real.auth_type || this.real.auth_type === 'id_card') {
          this.real.auth_type = 'idCard'
        }
        this.real.auth_typeStr = this.auth_types.find((item) => {
          return item.type === this.real.auth_type
        }).name
        if (this.real.certificates) {
          let arr = this.real.certificates.split(",")
          this.real.front = arr[0]
          this.real.back = arr[1]
        }
        if (this.real.birthday) {
          console.log("日期切割")
          this.real.birthday = ('' + this.real.birthday).match(/(\d{4})(\d{2})(\d{2})/).slice(1).join('-')
        }
        if (this.real.country) {
          this.real.countryName = this.countryList.find((item) => {
            return item.type === this.real.country
          }).name
        }
        this.showPage = true
        uni.hideLoading()
      }
    },
    methods: {
      async getCountryList() {
        const res = await this.$api.commissionApi.certificationCountry()
        if (res.code === 0) {
          this.countryList = res.data || []
        }
      },
      showAuthType(type) {
        console.log("showAuthType:", type, this.updateRealname)
        if (this.updateRealname) {
          return
        }
        // 显示哪个类型的弹窗 type  证件, 出生日期, 国籍, 性别
        this.curSelectedType = type || ''
        if (type === 'nationality') {
          this.list = this.countryList
        } else if (type === 'gender') {
          this.list = [{
            name: '男'
          }, {
            name: '女'
          }]
        } else {
          this.list = this.auth_types
        }
        this.showPicker = true
      },
      // 确认选择的证件类型
      myOnConfirm(index) {
        this.showPicker = false
        if (this.curSelectedType === 'nationality') {
          this.real.country = this.countryList[index].type
          this.real.countryName = this.countryList[index].name
        } else if (this.curSelectedType === 'gender') {
          let arr = [{
            name: '男'
          }, {
            name: '女'
          }]
          this.real.gender = arr[index].name
        } else {
          // 证件类型
          this.real.auth_type = this.auth_types[index].type
          this.real.auth_typeStr = this.auth_types[index].name
        }
      },
      bindDateChange: function(e) {
        this.date = e.target.value
        this.real.birthday = this.date.replaceAll("-", '')
      },
      getDate(type) {
        const date = new Date();
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        let day = date.getDate();
        if (type === 'start') {
          year = year - 60;
        } else if (type === 'end') {
          year = year + 2;
        }
        month = month > 9 ? month : '0' + month;;
        day = day > 9 ? day : '0' + day;
        return `${year}-${month}-${day}`;
      },
      showAddress() {
        if (this.updateRealname && !this.codeValid) {
          return
        }
        this.showAddressPicker = true
      },
      chooseBank() {
        if (this.updateRealname && !this.codeValid) {
          return
        }
        uni.setStorageSync('realName', JSON.stringify(this.real))
        if (this.updateRealname) {
          this.$navigateTo('/pagesMine/certification/bankChoose?updateRealname=true', {})
        } else {
          this.$navigateTo('/pagesMine/certification/bankChoose', {})
        }
      },
      async uploadImage(field) {
        const data = await this.$api.commonApi.uploadImg({
          count: 1
        })
        if (data.success) {
          const newData = data.url.sort((a, b) => {
            return a.sort - b.sort
          })
          console.log("上传", newData)
          this.$nextTick(() => {
            this.real[field] = newData[0].url
            let certificates = []
            certificates.push(this.real.front)
            certificates.push(this.real.back)
            this.real.certificates = certificates.join(',')
          })
        }
      },
      // 校验手机验证码
      async validMsg(value) {
        this.real.smsCode = value
        console.log("提交:", this.real)
        const res = await this.$api.commissionApi.afterConfirm(this.real)
        this.showPhoneDialog = false
        if (res.code === 0) {
          uni.showToast({
            title: '提交成功',
            icon: 'none',
            duration: 2 * 1000
          })
          setTimeout(() => {
            this.$navigateTo('/pagesMine/certification/success')
          }, 2000);
        }
      },
      // 个人认证信息查询 
      async certificationGet() {
        const real = await this.$api.commissionApi.certificationQuery()
        console.log("个人认证信息查询:", real)
        if (real.code === 0) {
          if (real.data) {
            this.bank_no = real.data.bank_no
            if (this.pageType == 'cloudAlipay') {
              const cloud_res = await this.$api.commissionApi.getBalanceWithdrawChannel({
                userId: this.$store.state.userInfo.uid
              })
              if (cloud_res.code === '000000' && cloud_res.data != null) {
                this.bank_no = cloud_res.data.bankCard
              }
            }
            this.real = {
              ...this.real,
              ...real.data
            }
            this.list = real.data.auth_types
          }
        }
      },
      // 重新获取验证码
      async sendMsg(isOver) {
        // this.waittingMsg = isOver
        // if (this.waittingMsg) {
        //   const real = await this.$api.commissionApi.certificationGetSendMsg()
        //   if (real.code === 0) {
        //     console.log('real', real)
        //   }
        // }
        // console.log('isOver', isOver)
        delete this.real['ref']
        const res = await this.$api.commissionApi.certificationSave(this.real)
        if (res.code === 0) {
          this.real.ref = res.data.authRef // 流水号
        }
      },

      // 保存信息, 验证手机号
      async saveReal() {
        // setTimeout(() => {
        //   this.$navigateTo('/pagesMine/certification/success')
        // }, 2000);
        if (this.pageType == 'cloudAlipay') {
          this.$api.commissionApi.bindBankCard({
            bankArea: this.real.bank_area, //户口所在地
            bankCardNo: this.real.bank_no, //银行卡号
            bankName: this.real.bank_name, //银行名称
            mobile: this.real.bank_mobile, //预留手机
            userId: this.userInfo.uid,
            realName: this.real.auth_name,
            idCard: this.real.auth_no
          }).then(res => {
            if (res.code == '000000') {
              uni.navigateBack({
                delta: 1
              })
            } else {
              uni.showToast({
                title: res.msg,
                icon: 'none',
              })
            }
          })
          return
        }
        if (this.updateRealname) {
          // 审核中跳转去提交页面
          if (this.status_cloud === 2) {
            console.log("审核中跳转去提交页面")
            this.$navigateTo(`/pagesMine/certification/editIndex`)
          }
          return
        }
        console.log("codeValid:", this.codeValid, this.updateRealname)
        if (this.canSub) {
          uni.showToast({
            title: this.dataName[this.canSub],
            icon: 'none',
            duration: 2 * 1000
          })
          return
        } else {
          // 检查手机号
          if (!regexp.mobile.test(this.real.bank_mobile)) {
            uni.showToast({
              title: '请输入正确的手机号',
              icon: 'none',
              duration: 2 * 1000
            })
            return
          }
          if (!this.codeValid) {
            // this.sendMsg(true)
            this.showPhoneDialog = true
            // return
          }
          // 修改认证
          if (this.updateRealname) {
            // 修改认证
            const updateRes = await this.$api.commissionApi.certificationUpdateCard({
              bankNo: this.real.bank_no,
              bankName: this.real.bank_name,
              bankArea: this.real.bank_area,
              mobile: this.real.bank_mobile
            })
            if (updateRes.code === 0) {
              this.$navigateTo('/pagesMine/certification/success')
            } else {
              uni.showToast({
                title: updateRes.msg,
                icon: 'none',
                duration: 2 * 1000
              })
            }
          } else {
            console.log("提交认证");
            // 提交认证
            delete this.real['auth_types']
            this.real.birthday = this.date.replaceAll("-", '')
            const res = await this.$api.commissionApi.certificationSave(this.real)
            if (res.code === 0) {
              console.log("认证结果", res)
              this.showPhoneDialog = true
              this.real.ref = res.data.authRef // 流水号
              uni.removeStorageSync('realName')
              //返回的url为空则为认证过，返回页面
              // if(!res.data.certification_url){
              //   uni.navigateBack();
              // }else{
              //   // 测试环境地址
              //   if (res.data.certification_url.indexOf('contract-qa') > -1) {
              //     h5NavigateTo(res.data.certification_url.replace('contract-qa', 'contract-qa01'))
              //   } else {
              //     h5NavigateTo(res.data.certification_url.replace('contract', 'contract01'))
              //   }
              // }
            } else {
              uni.showToast({
                title: res.msg,
                icon: 'none',
                duration: 2 * 1000
              })
            }
          }
        }
      },
      onConfirm(data) {
        this.real.bank_area = data[0].name + data[1].name + data[2].name
        this.addressData.province = data[0].name
        this.addressData.city = data[1].name
        this.addressData.area = data[2].name
        this.showAddressPicker = false
      },
      addPlaceholdersToOutput(output, index, placeholder) {
        for (; index < output.length; index++) {
          if (output[index] === '9') {
            output[index] = placeholder
          }
        }
        return output
      },
      maskValue(val, mask) {
        const val1 = mask ? this.toPattern(val, mask) : val
        return val1
      },
      toPattern(value, opts) {
        var pattern = (typeof opts === 'object' ? opts.pattern : opts)
        var patternChars = pattern.replace(/\W/g, '')
        var output = pattern.split('')
        var values = value.toString().replace(/\W/g, '')
        var charsValues = values.replace(/\W/g, '')
        var index = 0
        var i
        var outputLength = output.length
        var placeholder = (typeof opts === 'object' ? opts.placeholder : undefined)

        for (i = 0; i < outputLength; i++) {
          // Reached the end of input
          if (index >= values.length) {
            if (patternChars.length === charsValues.length) {
              return output.join('')
            } else if ((placeholder !== undefined) && (patternChars.length > charsValues.length)) {
              return this.addPlaceholdersToOutput(output, i, placeholder).join('')
            } else {
              break
            }
          } else {
            if ((output[i] === '9' && values[index].match(/[0-9]/))) {
              output[i] = values[index++]
            } else if (output[i] === '9') {
              if (placeholder !== undefined) {
                return this.addPlaceholdersToOutput(output, i, placeholder).join('')
              } else {
                return output.slice(0, i).join('')
              }
              // exact match for a non-magic character
            } else if (output[i] === values[index]) {
              index++
            }
          }
        }
        return output.join('').substr(0, i)
      },
      inputFocus(event, type) {
        if (type === 1) {
          if (event.target.value) {
            this.delete1 = true
          } else {
            this.delete1 = false
          }
        } else if (type === 2) {
          if (event.target.value) {
            this.delete2 = true
          } else {
            this.delete2 = false
          }
        } else if (type === 3) {
          this.useBottomGreyLine = true
          if (event.target.value) {
            this.delete3 = true
          } else {
            this.delete3 = false
          }
        } else if (type === 4) {
          if (event.target.value) {
            this.delete4 = true
          } else {
            this.delete4 = false
          }
        }
      },
      inputBlur(type) {
        setTimeout(() => {
          if (type === 1) {
            this.delete1 = false
          } else if (type === 2) {
            this.delete2 = false
          } else if (type === 3) {
            this.useBottomGreyLine = false
            this.delete3 = false
          } else if (type === 4) {
            this.delete4 = false
          }
        }, 100)
      },
      async loginto(e) {
        if (e.detail.value.length !== 6) {
          return
        }
      },
      verify() {
        switch (this.countryCode) {
          case '+86':
            if (this.getVerify !== '重新获取验证码' || this.phoneNumber.length !== 13) {
              return
            }
            if (!(/^\d{11}$/.test(this.phoneNumber.replace(/\s*/g, ''))) && this.countryCode === '+86') {
              uni.showToast({
                title: '请输入正确的手机号',
                icon: 'none',
                duration: 2 * 1000
              })
            } else {
              this.subcli()
            }
            break
          default:
            this.subcli()
        }
      },
    }
  }
</script>
<style lang="scss" scoped>
  .upload-card {
    margin-top: 20rpx;
    background-color: #f5f5f5;

    .tit {
      font-size: 30rpx;
      color: #1B1B20;
      line-height: 40rpx;
      padding-top: 36rpx;
      padding-left: 38rpx;
      background: white;
    }

    .box {
      @include flex;
      @include j-between;
      padding: 0 70rpx;
      padding-top: 46rpx;
      margin-bottom: 20rpx;
      background: white;

      .item {
        .tip {
          text-align: center;
          line-height: 32rpx;
          font-size: 28rpx;
          margin-top: 45rpx;
          margin-bottom: 40rpx;
        }
      }
    }

    .tip-box {
      padding-left: 38rpx;
      font-size: 22rpx;
      color: #999999;
      line-height: 32rpx;
      padding-top: 12rpx;
      background: white;
    }
  }

  .phoneMsgDialog {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    display: flex;
    z-index: 2;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.6);
    justify-content: center;

    .content {
      margin-top: -200rpx;
      box-sizing: border-box;
      background-color: #fff;
      padding: 32rpx;
      width: 750rpx;
      height: 470rpx;
      position: relative;

      .close {
        right: 32rpx;
        top: 32rpx;
        width: 28rpx;
        height: 28rpx;
        position: absolute;
      }

      .title {
        font-weight: bold;
        font-size: 34rpx;
        color: #333;
      }

      .subTitle {
        margin-top: 16rpx;
        color: #999;
        font-size: 28rpx;
      }

      .varifyCodeBox {
        display: flex;
        align-items: center;
        margin-top: 68rpx;
        justify-content: space-between;

        .sendMsg {
          width: 176rpx;
          height: 80rpx;
          line-height: 80rpx;
          font-size: 24rpc;
          color: white;
          background-color: #000;
          text-align: center;

          &.disable {
            background-color: #ccc;
          }
        }

        .varifyCode {
          font-size: 28rpx;
          padding-left: 32rpx;
          width: 486rpx;
          height: 80rpx;
          border: 2rpx solid $color-border;
        }
      }

      .closeButton {
        width: 686rpx;
        height: 98rpx;
        line-height: 98rpx;
        font-size: 32rpc;
        margin-top: 48rpx;
        color: white;
        background-color: #000;
        text-align: center;
      }
    }
  }

  .status-tip {
    font-size: 22rpx;
    color: #19191F;
    text-align: center;
  }

  .inland-status-tip {
    padding: 28rpx 33rpx 0;
    font-size: 22rpx;
    color: #19191F;
  }

  .saveReal {
    position: relative;
    width: calc(100vw - 64rpx);
    color: #fff;
    box-sizing: border-box;
    line-height: 98rpx;
    text-align: center;
    font-size: 28rpx;
    background-color: #f5f5f5;
    margin: 50rpx 32rpx 30rpx;

    .text {
      background-color: #000;
      height: 98rpx;
    }

    &.saveRealUn {
      .text {
        background-color: #ccc;
      }
    }
  }

  .foreign-card {
    padding-left: 32rpx !important;
    padding-right: 32rpx !important;
  }
</style>
